<template>
  <a-layout id="components-layout-demo-side" style="min-height: 100vh">
    <a-layout-sider
      v-model="collapsed"
      collapsible
      style="background-color: white"
    >
      <div class="logotext" ref="logotext">{{ UserInfo.schoolName }}</div>
      <a-menu
        theme="light"
        :selectedKeys="HomeSelectedKeys"
        mode="inline"
        @click="MenuChange"
        :open-keys="openkeys"
        @openChange="onOpenChange"
      >
        <a-menu-item
          v-for="item in menuitem"
          :key="item.key"
          :disabled="homeSelectedState"
        >
          <router-link :to="item.link">
            <a-icon :type="item.iconType"></a-icon>
            <span>{{ item.title }}</span>
          </router-link>
        </a-menu-item>
        <a-sub-menu
          :key="item.key"
          v-for="item in submenu"
          :disabled="homeSelectedState"
          v-show="
            item.children.length > 0 && UserInfo.roleName.indexOf('User') != 0
          "
        >
          <span slot="title">
            <a-icon :type="item.iconType" /><span>{{ item.title }}</span></span
          >
          <a-menu-item
            :key="children.key"
            v-for="children in item.children"
            :disabled="homeSelectedState"
          >
            <router-link :to="children.link">{{ children.title }}</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <div class="userInfo_wrap">
          <div>
            <a-avatar
              src="https://portrait.gitee.com/uploads/avatars/user/2184/6553316_lu-sir_1593787900.jpeg!avatar100"
            />
            <span
              >{{ UserInfo.name }}({{
                UserInfo.roleName.indexOf("User") >= 0 ? "学生" : "教师"
              }})</span
            >
          </div>
          <div @click="signOut">
            <span>退出</span>
            <span class="icon iconfont icontuichu"></span>
          </div>
        </div>
      </a-layout-header>
      <a-layout-content>
        <div class="mian_wrap">
          <router-view></router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
const menuitem = [
  { key: "0", link: "/home/message", iconType: "frown", title: "消息列表" },
  {
    key: "1",
    link: "/home/apply",
    iconType: "frown",
    title: "实习申请",
    auth: "User",
  },
  {
    key: "2",
    link: "/home/group",
    iconType: "frown",
    title: "实习小组",
    auth: "User",
  },
  {
    key: "3",
    link: "/home/test",
    iconType: "frown",
    title: "考评成绩（admin测试）",
    // auth: "Manager",
  },
  {
    key: "4",
    link: "/home/PersonalData",
    iconType: "frown",
    title: "个人资料",
  },
];
const submenu = [
  {
    key: "sub1",
    iconType: "frown",
    title: "实习小组",
    auth: "Manager",
    children: [],
  },
];
import { mapState, mapMutations } from "vuex";
import Api from "@/request/api";
export default {
  data() {
    return {
      collapsed: false, //收缩状态
      menuitem,
      submenu,
      openkeys: ["sub1"],
    };
  },
  methods: {
    ...mapMutations(["setHomeSelectedKeys", "removeUserInfo", "setGroupKey"]),
    //退出
    signOut() {
      this.removeUserInfo();
      this.$router.push("/login");
    },
    //侧边栏的点击选中key变化
    MenuChange({ key }) {      
      var temp = this.submenu[0].children.find((item) => item.key == key);
      if (temp != undefined) {
        this.setGroupKey({ key: temp.key, name: temp.title });
      }       
      this.setHomeSelectedKeys([`${key}`]);
    },
    //初始化权限
    initData() {
      this.menuitem = this.menuitem.filter((item) => {
        if (item.auth) return item.auth.indexOf(this.UserInfo.roleName) == 0;
        else return true;
      });
      if (this.UserInfo.roleName.indexOf("User") != 0) {
        this.submenu = this.submenu.filter((item) => {
          if (item.auth) return item.auth.indexOf(this.UserInfo.roleName) == 0;
          else return true;
        });
        //加载老师的二级菜单
        this.TeacherGetGroup();
      } else {
        this.StudentGetGroup();
      }
    },
    onOpenChange(openKeys) {
      this.openkeys = openKeys;
    },
    TeacherGetGroup() {
      Api.TeacherGetGroup()
        .then((res) => {
          var temp = res.data.result.map((item) => {
            return {
              key: item.id,
              title: item.name,
              link: "/home/group",
            };
          });
          this.submenu[0].children = temp;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    StudentGetGroup() {
      console.log(1);
    },
  },
  watch: {
    //监听收缩状态,改变标题字体
    collapsed() {
      if (this.collapsed) this.$refs.logotext.style.fontSize = "10px";
      else this.$refs.logotext.style.fontSize = "18px";
    },
  },
  computed: {
    ...mapState(["HomeSelectedKeys", "UserInfo", "homeSelectedState"]),
  },
  created() {
    this.initData();
  },
};
</script>

<style lang="less">
#components-layout-demo-side .logotext {
  height: 32px;
  margin: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 5px 5px 5px #4889dc;
  transition: all 1s;
}

.ant-layout-sider-trigger {
  background-color: #4889dc;
  border-top: 1px solid #ccc;

  .anticon {
    color: white;
  }
}

.ant-layout-content {
  padding: 1%;
}

.ant-layout-header {
  display: flex;
  justify-content: flex-end;
  background-color: #4889dc !important;

  .userInfo_wrap {
    display: flex;
    font-size: 16px;
    color: white;
    align-items: center;

    div {
      height: 80%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px;
      position: relative;
      transition: all 0.2s;

      &:hover {
        cursor: pointer;
        border-bottom: 1px solid white;
        font-size: 18px;
      }

      &:nth-child(1)::after {
        content: "";
        border: 1px solid white;
        position: absolute;
        height: 25px;
        top: 15px;
        right: -10%;
      }
    }

    .ant-avatar {
      background-color: white;

      img {
        padding: 1px;
        border-radius: 50%;
      }
    }

    span {
      margin: 0 3px;
    }

    .icontuichu {
      font-size: 20px;
    }
  }
}

.mian_wrap {
  background-color: white;
  height: 100%;
}
</style>